<!DOCTYPE html>
<html>
<head>
    <title>Pinrehit：图片展示</title>
    <!-- Required meta tags -->
<!--    <meta charset="utf-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
<!--    &lt;!&ndash; Bootstrap CSS &ndash;&gt;-->
<!--    <link rel="stylesheet" href="css/bootstrap.min.css">-->
<!--    &lt;!&ndash; FontAwesome CSS &ndash;&gt;-->
<!--    <link rel="stylesheet" href="css/font-awesome.min.css">-->
<!--    &lt;!&ndash; Styles &ndash;&gt;-->
<!--    <link rel="stylesheet" href="css/style.css">-->
<!--    <script src="js/jquery-3.3.1.js"></script>-->

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- FontAwesome CSS -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- Styles -->
    <link rel="stylesheet" href="style.css">


    <script type='text/javascript' src='js/jquery.js'></script>
    <script type='text/javascript' src='js/custom.js'></script>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type='text/javascript' src='js/singelPicJQ.js'></script>
</head>



<body>
<!--导航栏-->
<header class="site-header">
    <div class="site-branding">
        <h1 class="site-title"><a id="index" href="#" rel="home"><img src="images/logo.svg" height="50" width="50" alt="Logo"></a></h1>
    </div><!-- .site-branding -->

    <div class="hamburger-menu">
        <div class="menu-icon">
            <img src="images/menu-icon.png" alt="menu icon">
        </div><!-- .menu-icon -->

        <div class="menu-close-icon">
            <img src="images/x.png" alt="menu close icon">
        </div><!-- .menu-close-icon -->
    </div><!-- .hamburger-menu -->
</header><!-- .site-header -->
<nav class="site-navigation flex flex-column justify-content-between">
    <div class="site-branding d-none d-lg-block ">
        <h1 class="site-title"><a id="index1" href="#" rel="user"><img src="images/logo.svg" height="50" width="50" alt="Logo"></a></h1>
    </div><!-- .site-branding -->

    <ul class="main-menu flex flex-column justify-content-center">
        <li><a id="addpin" href="#">创建pin</a></li>
        <li><a id="mypin" href="#">我的pin</a></li>
        <li><a id="mysaved" href="#">我的收藏</a></li>
        <li><a href="index.html">注销</a></li>
    </ul>

    <p>
        Copyright &copy;<script>document.write(new Date().getFullYear());</script> Made in HIT
    </p>
</nav>



<script>
    $(function (){
        document.getElementById("mypin").href="mypin.html?uid="+uid;
        document.getElementById("mysaved").href="mysaved.html?uid="+uid;
        document.getElementById("index").href="index.html?uid="+uid;
        document.getElementById("index1").href="index.html?uid="+uid;
        document.getElementById("addpin").href="addpin.html?uid="+uid;

    });
</script>

<div class="nav-bar-sep d-lg-none"></div>

<div class="outer-container">
    <div class="single-post">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="featured-img">
                        <figure>
                            <img id="image" src="#" alt="blog" height="500" width="700">

                        </figure>
                    </div><!-- .content-area -->
                </div><!-- .col -->

                <div class="col-12 col-lg-8">
                    <div class="content-area">
                        <header class="entry-header">
                            <div class="post-meta">
                            </div><!-- .meta-post -->

                            <h1 type="text" id="title"></h1>
                            <div id="uid"></div>
                            <span class="byline">by <span class="author"><a id="author" href="#" ></a></span></span>
                        </header><!-- .entry-header -->

                        <div class="entry-content">
                            <p type="text" id="summary"></p>

                        </div><!-- .entry-content -->
                    </div><!-- .content-area -->
                </div><!-- .col-12 -->

                <aside class="col-12 col-lg-3 offset-lg-1">
                    <div class="entry-meta">

                        <div class="posted-tags">
                            <label>tags</label>
                            <div id="tag"></div>
                          <!--
                            <span><a href="#">Zood</a>, <a href="#">理塘</a>, <a href="#">丁真</a> </span>
                            -->
                        </div><!-- .entry-meta -->


                    </div><!-- .entry-meta -->
                </aside><!-- .col-md-3 -->


                <div class="col-12 col-lg-7">
                    <img src="images/save.svg" height="100" width="100" id="collect">
                    <img src="images/like.svg" height="100" width="100" id="like">
                    <span id="likeNumb"></span>
                    <br>
                    <hr/>
                    <div class="comments-form">
                        <div class="comment-respond">
                            <h3 class="comment-reply-title">留言</h3>
                            <form class="comment-form">
                                <textarea rows="4" placeholder="Messages" id="com"></textarea>
                            </form><!-- .comment-form -->
                            <button id="btn_send"  type="button" >send message</button>
                        </div><!-- .comment-respond -->
                    </div><!-- .comments-form -->
                    <br>
                    <h3 class="comments-title"><span class="comments-number" id="comNumb"></span></h3>
                    <div class="content-area">
                        <div class="post-comments">
                            <ol class="comment-list" id="comment">
                                <li class="comment">
                                </li><!-- .comment -->
                            </ol><!-- .comment-list -->
                            <br>
                            <hr/>
                            <br>
                        </div><!-- .post-comments -->
                    </div><!-- .content-area -->
                </div><!-- .col-12 -->

            </div><!-- .row -->
        </div><!-- .container -->
    </div><!-- .single-post -->
</div><!-- .outer-container -->

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/custom.js'></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/custom.js'></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src='js/singelPicJQ.js'></script>



<script>
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)
            return  unescape(r[2]);
        return null;

    }
</script>

<script>
            var title;
            var author;
            var image;
            var picid=GetQueryString("pid");
            var content;
            $.ajax({
                async:false,
                type:"POST",
                url:"getPicInf",
                success:function (data) {

                    for(var i=0;i<data.length;i++){
                        if(!(data[i].picid-picid)){

                           title=data[i].picname;
                           author=data[i].picauthor;
                           image=data[i].pictures;
                           content=data[i].picintroduction;

                           break;
                        }
                    }
                    $("#title").html(title);
                    $("#author").html(author);
                    $("#summary").html(content);
                    document.getElementById("image").src=image;
                    document.getElementById("author").href="mypin.html?uid="+author;
                },
                error:function (data){
                    alert("ERROR!!!!!");
                }
            });

</script>


<script>
    var picid=GetQueryString("pid");
    $.ajax({
        async:false,
        type:"GET",
        url:"getPicIDandPicTagZZY",
        success:function (data) {
            var tagmsg="<span>";
            for(var i=0;i<data.length;i++){
                if(!(data[i].picid-picid)){
                    tagmsg+="<a>"+data[i].pictag+"</a>,";
                }
            }
            tagmsg+="</span>";
            $("#tag").html(tagmsg);
        },
    });
</script>

<script>
    $.get("getUernameZZY",{},function (data){
        $("#uid").text(data);
    });
</script>


</body>
</html>